<template>
  <div class="content">
    <div class="breadcrumb" :gutter="24">
      {{$t('recipe.formula_management')}}

    </div>
    <el-form ref="form" :model="formData" label-width="68px" size="small">
      <el-row :gutter="28">
        <el-col :xs="3" :sm="1" :md="1" :lg="1" :xl="1">
          <el-button type="primary" size="small" :icon="'iconfont ' + icon" class="change" @click="changePattern"></el-button>
        </el-col>
        <el-col :xs="9" :sm="6" :md="5" :lg="3" :xl="3" label-width="68px">
          <el-form-item :label="$t('common.keyword')">
            <el-input v-model="formData.keyword" clearable placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="8" :md="10" :lg="6" :xl="4" class="titmepicker">
          <el-form-item :label="$t('recipe.starting_and_ending_time')">
            <el-date-picker v-model="formData.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              :unlink-panels="true">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="6" :md="5" :lg="3" :xl="4">
          <el-form-item :label="$t('recipe.state')" label-width="40px">
            <el-select v-model="formData.status" multiple placeholder="" clearable>
              <el-option v-for="(item,index) in statusList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="2" :sm="2" :md="1" :lg="1" :xl="2">
          <el-form-item label-width="0px">
            <el-button type="primary" size="small" @click="handleSearch">{{ $t("common.query") }}</el-button>
          </el-form-item>
        </el-col>

        <div class="btngroup">
          <el-button type="primary" size="small" @click="handleBomView()">{{ $t("recipe.bom_list") }}</el-button>
          <el-button type="primary" size="small" @click="handleView()">{{ $t("recipe.process_parameters") }}</el-button>
          <el-button type="primary" size="small" @click="handleAdd()">{{ $t("common.add") }}</el-button>
          <el-button type="primary" size="small" :disabled="disabled != 1" @click="modifyRow()">{{ $t("common.edit") }}</el-button>
          <el-button type="primary" size="small" @click="handleCopy()"> {{ $t("common.copy") }}</el-button>
          <el-button type="primary" size="small" :disabled="disabled == 2 || disabled == 3"
            @click="handleDelete()">{{ $t("common.remove") }}</el-button>
          <el-button size="small" :disabled="disabled != 1 || currObj.isApprove == 1"
            @click="handleModifyStatus(2)">{{ $t("recipe.approval_application") }}</el-button>
        </div>
      </el-row>
    </el-form>

    <div class="dataContent">
      <div style="margin-top:0px">
        <tableList @handleEdit="handleEdit" :tableData="tableData" :tableLoading="tableLoading" :pager="pager" class="tableAuto"
          v-if="!isCard" @sortChange="sortChange"></tableList>
        <cardList @handleEdit="handleEdit" v-if="isCard" :tableData="tableData" :tableLoading="tableLoading"></cardList>
      </div>
      <div class="pagination-area">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[20, 30, 50, 100]"
          :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
        </el-pagination>
      </div>
      <div class="marginLing">
        <el-row :gutter="24">
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="padding:5px;">
            <div style="border:1px solid #e1e1e1 ;">
              <div style="text-align: right;padding-right:10px;">
                <el-button size="small" type="text" @click="exportpic('columnar','柱状图')">{{$t("common.export_bar")}}</el-button>
              </div>

              <div id="columnar" ref="columnar" style="height: 350px;" v-loading="echartsLoading"></div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="padding:5px;">
            <div style="border:1px solid #e1e1e1 ;">
              <div style="text-align: right;padding-right:10px">
                <el-button size="small" type="text" @click="exportpic('annular','饼图')">{{$t('common.export_pie')}}</el-button>
              </div>
              <div id="annular" ref="annular" style="height: 350px;" v-loading="echartsLoading"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog :title="`查看${viewTitle}`" :visible.sync="isShowRecipe" class="isShowDialog" :before-close="handleCloseView" :width="'93%'">
      <div style="text-align: right;padding-right:10px">
        <el-button size="small" type="text" @click="exportpicView('treeView', `${viewTitle}`)">导出{{viewTitle}}图</el-button>
      </div>
      <div id="treeView" ref="treeView" style="width:100%;"></div>
    </el-dialog>

    <el-dialog v-dialogDrag :title="title" :visible.sync="isShowDialog" :close-on-click-modal="false" width="60vh" class="isShowDialog"
      :before-close="handleClose">
      <el-form :model="ruleForm" label-width="80px" ref="ruleForm" size="small" :rules="rules" :hide-required-asterisk="true">
        <el-row :gutter="35">
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.formula_name')" prop="recipeName">
              <el-input v-model="ruleForm.recipeName" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24">
            <el-form-item :label="$t('common.version')" prop="version">
              <el-input v-model="ruleForm.version" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24">
            <el-form-item :label="$t('recipe.recipe_type')" prop="recipeType">
              <!-- <el-input v-model="ruleForm.recipeType" placeholder="" clearable></el-input> -->
              <el-select v-model="ruleForm.recipeType" :disabled="title == '编辑配方'">
                <el-option v-for="(item,index) in recipeTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :xs="24">
            <el-form-item :label="$t('recipe.material_code')" prop="item">
              <el-select v-model="ruleForm.item" remote filterable :remote-method="remoteMethodItemCode" placeholder=""
                v-el-select-loadmore="loadMoreItemCodeFun" clearable @clear="clearItemCode" @change="changeCode"
                :disabled="title == '复制配方'">
                <el-option v-for="(item,index) in itemCodeList" :key="index" :label="item.fid" :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('basic.material_description')" prop="itemDescription">
              <el-input v-model="ruleForm.itemDescription" disabled placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.yield')" prop="itemQty">
              <el-input v-model="ruleForm.itemQty" placeholder="" :disabled="title == '复制配方'" v-enterNumber2 type="number" clearable>
                <template slot="append">{{ruleForm.uomId}}</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.yield_max')" prop="itemQtyHi">
              <el-input v-model="ruleForm.itemQtyHi" placeholder="" :disabled="title == '复制配方'" v-enterNumber2 type="number" clearable>
                <template slot="append">{{ruleForm.uomId}}</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.yield_min')" prop="itemQtyLo">
              <el-input v-model="ruleForm.itemQtyLo" placeholder="" :disabled="title == '复制配方'" v-enterNumber2 type="number" clearable>
                <template slot="append">{{ruleForm.uomId}}</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('common.describe')" prop="notes">
              <el-input type="textarea" v-model="ruleForm.notes" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="title != '复制配方'" type="primary" size="small" @click="handleAddFormula('ruleForm')"
          :loading="loading">{{ $t("common.preservation") }}</el-button>
        <el-button v-if="title == '复制配方'" type="primary" size="small" @click="handleCopyFormula('ruleForm')"
          :loading="loading">{{ $t("common.preservation") }}</el-button>
        <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { addFormula } from "@/api/addFormula"
import tableList from "./template/tableList.vue"
import cardList from "./template/cardList.vue"
import { configure } from "@/api/configure"
import { approvehttp } from "@/api/approve"
import { columnarEcharts, annularEchar, treeEchar } from "./echarts.js"
export default {
  components: {
    tableList,
    cardList
  },
  data () {
    let itemQtyLoFn = (rule, value, callback) => {
      if (value) {
        if (parseFloat(value) > parseFloat(this.ruleForm.itemQty)) {
          callback(new Error('产量下限不能大于产量'));
        } else if (this.ruleForm.itemQtyHi) {
          if (parseFloat(value) > parseFloat(this.ruleForm.itemQtyHi)) {
            callback(new Error('产量下限不能大于产量上限'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      } else {
        callback();
      }
    }
    let itemQtyHiFn = (rule, value, callback) => {
      callback();
    }
    let itemQtyFn = (rule, value, callback) => {
      if (!value) {
        callback(new Error('产量不能为空'));
      } else {
        if (this.ruleForm.itemQtyHi) {
          if (parseFloat(value) > parseFloat(this.ruleForm.itemQtyHi)) {
            callback(new Error('产量不能大于产量上限'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      }
    }
    return {
      formData: {
        keyword: "",
        time: [],
        status: ['1', '2']
      },
      tableData: [],
      isShowDialog: false,
      isShowRecipe: false,
      activeName: "first",
      ruleForm: {
        recipeName: "",
        item: "",
        itemDescription: "",
        itemQty: "",
        notes: "",
        recipeStatus: 1, //默认传1
        uomId: "",
        itemQtyLo: "",
        itemQtyHi: "",
        trainId: '',
        recipeType: 1,
        version: '',
      },
      title: this.$t('dialog.recipe_add'),
      rules: {
        recipeName: [{ required: true, message: '配方名称不能为空', trigger: 'blur' }],
        version: [{ required: true, message: '版本不能为空', trigger: 'blur' }],
        itemDescription: [{ required: true, message: '物料描述不能为空', trigger: 'blur' }],
        item: [{ required: true, message: '物料编码不能为空', trigger: 'blur' }],
        recipeType: [{ required: true, message: '配方类型不能为空', trigger: 'blur' }],
        itemQtyLo: [{ validator: itemQtyLoFn, trigger: 'blur' }],
        itemQtyHi: [{ validator: itemQtyHiFn, trigger: 'blur' }],
        itemQty: [{ validator: itemQtyFn, trigger: 'blur' }],
      },
      loading: false,
      isCard: false,
      pager: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
        field: 'fCreatorTime',
        order: 'DESC',
      },
      secle: "", //是否有选中的列表或卡片
      icon: "icon-biaoge",
      tableLoading: false,
      disabled: 0,
      statusList: [{
        label: this.$t('common.editStatus'),
        value: "1"
      }, {
        label: this.$t('common.examine'),
        value: "2"
      }, {
        label: this.$t('common.approval'),
        value: "3"
      },
      //   {
      //     label:"启用",
      //     value:"4"
      // },
      {
        label: this.$t('common.abandoned'),
        value: "5"
      }, {
        label: this.$t('common.experiment'),
        value: "6"
      }],
      recipeTypeList: [
        { label: this.$t('recipe.process_formula'), value: 1 },
        { label: this.$t('recipe.equipment_formula'), value: 2 }
      ],
      itemCodeList: [],
      pagerClass: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      keywordClassId: "",
      echartsLoading: false,
      currObj: {},
      viewTitle: '',
    }
  },
  created () {
    this.getData();
    this.getItemList()
    this.getAllData()
  },
  methods: {
    handleSearch () {
      this.pager.pageNum = 1
      this.getData()
      this.getAllData()
    },
    getData () {
      let startTime = ""
      let endTime = ""
      if (this.formData.time && this.formData.time.length > 0) {
        startTime = this.$util.format(this.formData.time[0], 'YYYY-MM-DD')
      }
      if (this.formData.time && this.formData.time.length > 0) {
        endTime = this.$util.format(this.formData.time[1], 'YYYY-MM-DD')
      }
      const param = {
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        recipeName: this.formData.keyword,
        startTime: startTime,
        endTime: endTime,
        // recipeStatus:'',
        field: this.pager.field,
        order: this.pager.order,
        // isRecipeStatus:this.formData.status,
        isRecipeStatus: this.formData.status
      }
      this.tableLoading = true
      addFormula.getTbrecipeList(param).then(res => {
        this.tableLoading = false
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.pager.total = res.data.total
        }
      }).catch(e => {
        this.$message.error('服务器繁忙,请稍后再试');
        this.tableLoading = false
      })
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.pager.field = column.prop
        this.pager.order = 'DESC'
      } else {
        this.pager.field = column.prop
        this.pager.order = 'ASC'
      }
      this.pager.pageNum = 1
      this.getData()
    },
    handleAdd () {
      this.title = this.$t('dialog.recipe_add')
      this.ruleForm = {}
      this.ruleForm = {
        recipeName: "",
        item: "",
        itemDescription: "",
        itemQty: "",
        notes: "",
        recipeStatus: 1, //默认传1
        uomId: "",
        itemQtyLo: "",
        itemQtyHi: "",
        trainId: '',
        recipeType: 1,
      }
      try {
        this.$refs['ruleForm'].resetFields();

      } catch (e) { }
      this.isShowDialog = true
    },
    queryStatus (status) {
      switch (status) {
        case 1:
          return this.$t('common.editStatus')
        case 2:
          return this.$t('common.examine')
        case 3:
          return this.$t('common.approval')
        case 4:
          return this.$t('common.enable')
        case 5:
          return this.$t('common.abandoned')
        case 6:
          return this.$t('common.experiment')
      }
    },
    handleView () {
      if (this.secle === '') {
        this.$message.error('请选择要修改的信息');
        return
      }
      this.viewTitle = '配方'
      let row = this.tableData.find(item => item.fid == this.secle)

      this.isShowRecipe = true
      addFormula.viewTbrecipe(this.currObj).then(res => {

        let data = res.data
        let leafCount = 0
        data.children.forEach(function (datum, index) {
          datum.children.forEach(ii => {
            leafCount += ii.children.length
          })
          // leafCount += datum.children.length
        })

        var dom = this.$refs.treeView;
        var myChart = this.$echarts.init(dom);
        let tit = "   配方名称: " + this.currObj.recipeName
        tit = ''
        let subTit = "   配方名称: " + this.currObj.recipeName + "\n   物料编码: " + row.item + "\n   配方产量: " + row.itemQty + (row.uomId != null ? row.uomId : '') + "\n   配方状态: " + this.queryStatus(row.recipeStatus)

        if (treeEchar(data, tit, subTit) && typeof treeEchar(data, tit, subTit) === "object") {
          myChart.setOption(treeEchar(data, tit, subTit), true);
        }
        this.echartsResize1(dom, (leafCount > 1 ? leafCount * 40 : 500))
      })
    },
    handleBomView () {
      if (this.secle === '') {
        this.$message.error('请选择要修改的信息');
        return
      }
      this.viewTitle = 'BOM清单'
      let row = this.tableData.find(item => item.fid == this.secle)

      this.isShowRecipe = true
      addFormula.viewBomTbrecipe(this.currObj).then(res => {

        let data = res.data
        let leafCount = 0
        data.children.forEach(function (datum, index) {
          leafCount += datum.children.length
        })

        var dom = this.$refs.treeView;
        var myChart = this.$echarts.init(dom);
        let tit = "   配方名称:" + row.recipeName
        tit = ''
        let subTit = "   配方名称: " + this.currObj.recipeName + "\n   物料编码:" + row.item + "\n   配方产量:" + row.itemQty + (row.uomId != null ? row.uomId : '') + "\n   配方状态: " + this.queryStatus(row.recipeStatus)

        if (treeEchar(data, tit, subTit) && typeof treeEchar(data, tit, subTit) === "object") {
          myChart.setOption(treeEchar(data, tit, subTit), true);
        }
        this.echartsResize1(dom, (leafCount > 1 ? leafCount * 55 : 500))
      })
    },
    handleClose () {
      this.$refs['ruleForm'].resetFields();
      this.isShowDialog = false
    },
    handleCloseView () {
      this.isShowRecipe = false
    },
    handleAddFormula (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let param = Object.assign({}, this.ruleForm)
          this.loading = true
          addFormula.addTbrecipe(param, this.title).then(res => {
            this.loading = false
            if (res.code == 200) {
              this.ruleForm = {}
              this.disabled = 0
              this.pager.pageNum = 1
              this.getData()
              this.getAllData()
              this.$message({ duration: 1000, type: 'success', message: '保存成功!' });
              this.isShowDialog = false
            } else {
              this.$message.error(res.msg);
            }
          }).catch(e => {
            this.loading = false
            this.$message.error('服务器繁忙,请稍后再试');
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    changePattern () {
      this.isCard = !this.isCard
      this.secle = ''
      this.icon = this.isCard ? 'icon-qiehuan' : 'icon-biaoge'
    },
    handleEdit (row) {
      this.ruleForm = Object.assign({}, row.row)
      this.secle = row.radioId
      this.disabled = row.row.recipeStatus
      this.currObj = row.row
    },
    modifyRow () {
      if (this.secle === '') {
        this.$message.error('请选择要修改的信息');
        return
      }
      let row = this.tableData.find(item => item.fid == this.secle)
      this.ruleForm = Object.assign({}, row)
      this.title = this.$t('dialog.recipe_edit')
      this.isShowDialog = true
    },
    //修改配方状态
    handleModifyStatus (stayus) {
      if (this.secle === '') {
        this.$message.error(`请选择要审批的数据`);
        return
      }
      let that = this
      this.$customConfirm1({
        content: '配方编辑是否完成',
        onok () {
          that.confirmCompletion(stayus)
        }
      })
    },
    confirmCompletion (stayus) {
      let row = this.tableData.find(item => item.fid == this.secle)
      this.ruleForm = Object.assign({}, row)
      let that = this
      this.$customConfirm({
        content: '是否将' + row.recipeName + '配方状态改为申请',
        onok () {
          const param = {
            fid: that.ruleForm.fid,
            recipeStatus: stayus
          }
          addFormula.modifyStatus(param).then(res => {
            if (res.code == 200) {
              that.getData()
              that.getAllData()
              that.disabled = stayus
              that.addAapprove(row)
              that.ruleForm = {}
              that.$message({ duration: 1000, type: 'success', message: '状态修改成功!' });
            }
          })
        }
      });
    },
    //添加审批记录
    addAapprove (row) {
      const param = {
        recipeId: row.fid,
        stateCd: '',
        actStartTimeUtc: '',
        recipeApproveLogVos: [{
          recipeId: row.fid
        }, {
          recipeId: row.fid
        }, {
          recipeId: row.fid
        }, {
          recipeId: row.fid
        }]
      }
      approvehttp.recipeApproveLogAdd(param).then(res => {

      })
    },
    //删除配方
    handleDelete () {
      if (this.secle === '') {
        this.$message.error("请选择要删除的配方");
        return
      }
      let row = this.tableData.find(item => item.fid == this.secle)
      this.ruleForm = Object.assign({}, row)
      let that = this
      this.$customConfirm({
        content: "请确认是否删除配方" + this.currObj.recipeName,
        onok () {
          addFormula.removeTbrecipe(that.ruleForm.fid).then(res => {
            if (res.code == 200) {
              that.getData()
              that.getAllData()
              that.disabled = 0
              that.ruleForm = {}
              that.secle = ''
              that.$message({ duration: 1000, type: 'success', message: '删除成功!' });
            } else {
              that.$message.error(res.msg);
            }
          })
        }
      });
    },


    handleSizeChange (val) {
      this.pager.pageNum = 1
      this.pager.pageSize = val
      this.getData()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.secle = ''
      this.getData()
    },
    //获取物料编码列表
    getItemList () {
      const param = {
        fid: this.keywordClassId,
        page: this.pagerClass.pageNum,
        size: this.pagerClass.pageSize,
        itemClassVo: {
          produced: 1
        }
      }
      configure.getItemList(param).then(res => {
        if (res.code == 200) {
          this.itemCodeList = [...this.itemCodeList, ...res.data.rows]
        }
      }).catch(e => {

      })
    },
    //下拉加载物料编码
    loadMoreItemCodeFun () {
      this.pagerClass.pageNum++
      this.getItemList()
    },
    //远程搜索物料编码
    remoteMethodItemCode (keyword) {
      this.keywordClassId = keyword.trim();
      this.pagerClass.pageNum = 1
      setTimeout(() => {
        this.itemCodeList = []
        this.getItemList()
      }, 200)
    },
    clearItemCode () {
      this.keywordClassId = ""
      this.pagerClass.pageNum = 1
      this.itemCodeList = []
      this.getItemList()
    },
    changeCode (val) {
      let item = this.itemCodeList.find(item => item.fid == val)
      this.ruleForm.itemDescription = item.itemDesc
      this.ruleForm.uomId = item.uomId
    },
    getAllData () {
      let startTime = ""
      let endTime = ""
      if (this.formData.time && this.formData.time.length > 0) {
        startTime = this.$util.format(this.formData.time[0], 'YYYY-MM-DD')
      }
      if (this.formData.time && this.formData.time.length > 0) {
        endTime = this.$util.format(this.formData.time[1], 'YYYY-MM-DD')
      }
      const param = {
        recipeName: this.formData.keyword,
        startTime: startTime,
        endTime: endTime,
        // recipeStatus:this.formData.status,
        isPageable: 1,
        isRecipeStatus: this.formData.status
      }
      this.echartsLoading = true
      addFormula.getTbrecipeList(param).then(res => {
        this.echartsLoading = false
        if (res.code == 200) {
          let xAxisData = []
          let data = []
          let annularData = []
          let obj = {
            recipeStatus1: 0,
            recipeStatus2: 0,
            recipeStatus3: 0,
            recipeStatus4: 0,
            recipeStatus5: 0,
            recipeStatus6: 0
          }
          res.data.rows.forEach(item => {
            xAxisData.push(item.recipeName + ' ' + item.version)
            data.push({
              value: item.itemQty || 0,
              itemStyle: {
                color: this.getColor(item.recipeStatus)
              },
              woId: item.recipeName
            })
            if (item.recipeStatus == 1) {
              obj["recipeStatus1"]++
            } else if (item.recipeStatus == 2) {
              obj["recipeStatus2"]++
            } else if (item.recipeStatus == 3) {
              obj["recipeStatus3"]++
            } else if (item.recipeStatus == 4) {
              obj["recipeStatus4"]++
            } else if (item.recipeStatus == 5) {
              obj["recipeStatus5"]++
            } else if (item.recipeStatus == 6) {
              obj["recipeStatus6"]++
            }
          })
          for (let key in obj) {
            annularData.push({
              value: res.data.rows.length == 0 ? 0 : (obj[key] / res.data.rows.length * 100).toFixed(2),
              name: this.queryStatus(parseInt(key.charAt(key.length - 1))),
              itemStyle: {
                color: this.getColor(parseInt(key.charAt(key.length - 1)))
              },
            })
          }
          this.$nextTick(() => {
            this.myCharts(xAxisData, data)
            this.myCharts1(annularData)
          })
        }
      }).catch(e => {
        this.$message.error('服务器繁忙,请稍后再试');
        this.echartsLoading = false
      })
    },
    myCharts (xAxisData, data) {
      var dom = this.$refs.columnar;
      var myChart = this.$echarts.init(dom);
      if (columnarEcharts(xAxisData, data) && typeof columnarEcharts(xAxisData, data) === "object") {
        myChart.setOption(columnarEcharts(xAxisData, data, this.$t('recipe.quantity_statistics')), true);
      }
      this.echartsResize(dom)
    },
    myCharts1 (annularData) {
      var dom = this.$refs.annular;
      var myChart = this.$echarts.init(dom);
      if (annularEchar(annularData) && typeof annularEchar(annularData) === "object") {
        myChart.setOption(annularEchar(annularData, this.$t('recipe.status_statistics')), true);
      }
      this.echartsResize(dom)
    },
    echartsResize (doc) {
      let sizeFun = () => {
        this.$echarts.init(doc).resize()
      }
      setTimeout(() => {
        window.addEventListener('resize', sizeFun)
      }, 100)
    },
    echartsResize1 (doc, autoHeight) {
      this.$echarts.init(doc).resize({ height: autoHeight })
    },
    handleCopy () {
      if (this.secle === '') {
        this.$message.error("请选择要复制的配方");
        return
      }
      this.title = "复制配方"
      addFormula.findTbrecipe(this.secle).then(res => {
        if (res.code == 200) {
          this.ruleForm = Object.assign({}, res.data)
          this.ruleForm.recipeName = ''
          if (res.data.trainVo)
            this.ruleForm.trainId = res.data.trainVo.fid
          this.ruleForm.notes = ''
          this.isShowDialog = true
        }
      })
    },
    handleCopyFormula (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          const param = {
            fid: this.ruleForm.fid,
            recipeName: this.ruleForm.recipeName,
            item: this.ruleForm.item,
            itemDescription: this.ruleForm.itemDescription,
            itemQty: this.ruleForm.itemQty,
            notes: this.ruleForm.notes,
            recipeStatus: 1, //默认传1
            uomId: this.ruleForm.uomId,
            itemQtyLo: this.ruleForm.itemQtyLo,
            itemQtyHi: this.ruleForm.itemQtyHi,
            version: this.ruleForm.version,
            recipeType: this.ruleForm.recipeType,
          }
          //针对单元配方，没有设备组，做特殊处理
          if (this.ruleForm.trainId != null) {
            let train = {
              fid: this.ruleForm.trainId ? this.ruleForm.trainId : null
            }
            param.trainVo = train
          }

          this.loading = true
          addFormula.copyTbrecipe(param).then(res => {
            this.loading = false
            if (res.code == 200) {
              this.ruleForm = {}
              this.disabled = 0
              this.pager.pageNum = 1
              this.getData()
              this.getAllData()
              this.$message({ duration: 1000, type: 'success', message: '保存成功!' });
              this.isShowDialog = false
            } else {
              this.$message.error(res.msg);
            }
          })
        } else {
          this.loading = false
          this.$message.error("服务器繁忙,请稍后再试");
          return false;
        }
      })
    },
    exportpic (val, type) {
      let myChart = this.$echarts.init(document.getElementById(val));
      let picInfo = myChart.getDataURL({
        type: 'png',
        pixelRatio: 1.5,  //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
        backgroundColor: '#fff'
      });//获取到的是一串base64信息

      const elink = document.createElement('a');
      elink.download = type + '统计图';
      elink.style.display = 'none';
      elink.href = picInfo;
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink)
    },
    exportpicView (val, type) {
      let myChart = this.$echarts.init(document.getElementById(val));
      let picInfo = myChart.getDataURL({
        type: 'png',
        pixelRatio: 1.5,  //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
        backgroundColor: '#fff'
      });//获取到的是一串base64信息

      const elink = document.createElement('a');
      elink.download = type + '-' + this.currObj.recipeName;
      elink.style.display = 'none';
      elink.href = picInfo;
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink)
    },

    getColor (status) {
      switch (status) {
        case 1:
          return "#00CC99"
        case 2:
          return "#2E75B5"
        case 3:
          return "#00FF00"
        case 4:
          return "#5B9BD5"
        case 5:
          return "#FFFF00"
        case 6:
          return "#F4B183"
      }
    },
    queryStatus (status) {
      switch (status) {
        case 1:
          return this.$t('common.editStatus')
        case 2:
          return this.$t('common.examine')
        case 3:
          return this.$t('common.approval')
        case 4:
          return this.$t('common.enable')
        case 5:
          return this.$t('common.abandoned')
        case 6:
          return this.$t('common.experiment')
      }
    },
  }

}
</script>

<style scoped>
.isShowDialog >>> .el-select {
  width: 100%;
}
.cardMode {
  height: calc(100vh - 275px);
  overflow: auto;
}
.btngroup {
  float: right;
  margin-right: 20px;
}
.change >>> .iconfont {
  font-size: 13px !important;
}
.pagination-area {
  text-align: right;
  padding-top: 20px;
  padding-bottom: 10px;
}
.titmepicker >>> .el-date-editor {
  width: 100%;
}
.titmepicker >>> .el-date-editor .el-range-separator {
  width: 8%;
}
@media only screen and (max-width: 768px) {
  .titmepicker {
    display: none;
  }
}
.dataContent {
  /* height: calc(100vh - 176px); */
  border: 1px solid #ebeef5;
  /* overflow: auto; */
}
.marginLing >>> .el-row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
</style>